<template>
	<uni-nav-bar :fixed="true" backgroundColor="#fff" :border="false" >
		<view class="navBar">
			<img src="/static/logo/logo.jpg" class="logop" />
			<text>AI智能联盟</text>
		</view>	
	</uni-nav-bar>
	
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
		<swiper-item>
			<view class="swiper-item">
				<img src="/static/banner/01.png" alt=""/>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<img src="/static/banner/02.png" alt=""/>
			</view>
		</swiper-item>
	</swiper>
	<view class="content">
		<view class="content-item one" @click="jumpUrl(bk1)" v-if="bk1.color == 2">
			<view class="content-item-one-title">上证指数</view>
			<view class="content-item-one-num">{{bk1.szzs_price}}</view>
			<view class="content-item-one-zhi">{{bk1.szzs_fu}}+{{bk1.szzs_ed}}%</view>
		</view>
		<view class="content-item two" @click="jumpUrl(bk1)" v-else>
			<view class="content-item-two-title">上证指数</view>
			<view class="content-item-two-num">{{bk1.szzs_price}}</view>
			<view class="content-item-two-zhi">{{bk1.szzs_fu}}-{{bk1.szzs_ed}}%</view>
		</view>
		<view class="content-item one" @click="jumpUrl(bk2)" v-if="bk1.color == 2">
			<view class="content-item-one-title">深证成指</view>
			<view class="content-item-one-num">{{bk2.szcz_price}}</view>
			<view class="content-item-one-zhi">{{bk2.szcz_fu}}+{{bk2.szcz_ed}}%</view>
		</view>
		<view class="content-item two" @click="jumpUrl(bk2)" v-else>
			<view class="content-item-two-title">深证成指</view>
			<view class="content-item-two-num">{{bk2.szcz_price}}</view>
			<view class="content-item-two-zhi">{{bk2.szcz_fu}}-{{bk2.szcz_ed}}%</view>
		</view>
		<view class="content-item one" @click="jumpUrl(bk3)" v-if="bk3.color == 2">
			<view class="content-item-one-title">创业板指</view>
			<view class="content-item-one-num">{{bk3.cybz_price}}</view>
			<view class="content-item-one-zhi">{{bk3.cybz_fu}}+{{bk3.cybz_ed}}%</view>
		</view>
		<view class="content-item three" @click="jumpUrl(bk3)" v-else>
			<view class="content-item-three-title">创业板指</view>
			<view class="content-item-three-num">{{bk3.cybz_price}}</view>
			<view class="content-item-three-zhi">{{bk3.cybz_fu}}-{{bk3.cybz_ed}}%</view>
		</view>
	</view>
	
	<view class="navContent">
		<view @click="jumpUrl(item)" v-for="item,id in navList" :key="id">
			<view class="nav-item">
				<image :src="item.navimg" mode=""></image>
				<text>{{item.navtitle}}</text>
			</view>
		</view>
	</view>
	
	<view class="guContent">
		<uni-section title="精选股票" type="line" style="width: 100%;">
			<template v-slot:right>
				<navigator url="/pages/gulist/gulist">更多></navigator>
			</template>
		</uni-section>
		<view class="gulist-title">
			<view class="gulist-item-title">
				<text style="width: 30%;">币种</text>
			</view>
			<view class="gulist-item-body">
				<text style="width: 23%;">价格</text>
				<text style="width: 23%;">涨跌幅</text>
				<text style="width: 23%;">涨跌额</text>
			</view>
		</view>
		<view class="gulist-item" v-for="item,id in guList" :key="id" @click="jumpUrl(item)">
			<view class="gulist-item-title">
				<text>{{item.biName}}</text>
				<text>{{item.biId}}</text>
			</view>
			<view class="gulist-item-body green" v-if="item.color == 1">
				<text>{{item.biPrice}}</text>
				<text>{{item.biFu}}</text>
				<text>{{item.biE}}</text>
			</view>
			<view class="gulist-item-body red" v-else-if="item.color == 2">
				<text>{{item.biPrice}}</text>
				<text>{{item.biFu}}</text>
				<text>{{item.biE}}</text>
			</view>
			<view class="gulist-item-body" v-else>
				<text>{{item.biPrice}}</text>
				<text>{{item.biFu}}</text>
				<text>{{item.biE}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { checkUpdate } from "@/components/yzhua006-update/js/app-update-check.js";
	export default {
		data() {
			return {
				title: 'Hello',
				user_token: null,
				navList:[
					{
						navUrl:'/pages/fuli/fuli',
						navtitle:'一键复利',
						navimg:'/static/nav/nav_1.png',
						type:1
					},
					{
						navUrl:'/pages/fulilis/fulilis',
						navtitle:'我的投资',
						navimg:'/static/nav/nav_2.png',
						type:1
					},
					{
						navUrl:'/pages/recharge/recharge',
						navtitle:'充值返现',
						navimg:'/static/nav/nav_3.png',
						type:1
					},
					{
						navUrl:'/pages/qrcode/qrcode',
						navtitle:'邀请返佣',
						navimg:'/static/nav/nav_4.png',
						type:1
					},
					{
						navUrl:'/pages/income/income',
						navtitle:'我的收益',
						navimg:'/static/nav/nav_5.png',
						type:1
					},
					{
						navUrl:'/pages/notice/notice',
						navtitle:'平台公告',
						navimg:'/static/nav/nav_6.png',
						type:1
					},
					{
						navUrl:'/pages/kefu/kefu',
						navtitle:'在线客服',
						navimg:'/static/nav/nav_7.png',
						type:1
					},
					{
						navUrl:'/pages/download/download',
						navtitle:'app下载',
						navimg:'/static/nav/nav_8.png',
						type:1
					}
				],
				bk1:{
						navUrl:'https://wzq.tenpay.com/mm/detail?type=1&scode=000001',
						navtitle:'上证指数',
						navimg:'/static/nav/nav_8.png',
						type:2
				},
				bk2:{
						navUrl:'https://wzq.tenpay.com/mm/detail?type=0&scode=399001',
						navtitle:'深证成指',
						navimg:'/static/nav/nav_8.png',
						type:2
				},
				bk3:{
						navUrl:'https://wzq.tenpay.com/mm/detail?type=0&scode=399006',
						navtitle:'创业板指',
						navimg:'/static/nav/nav_8.png',
						type:2
				},
				guList:null,
				userInfo:null,
			}
		},
		onLoad() {
			this.getUserInfo()
			this.getGulist()
			this.getAppInfo(0)
		},
		methods: {
			getAppInfo(type) {
				const system_info = uni.getSystemInfoSync();
				let params = {
					os: system_info.platform //本机设备操作系统  （android || ios） 
				}
				console.log(params.os)
				if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false
			
				//这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息
				uni.request({
					url: getApp().globalData.baseUrl + '/api/index/getAppVersionConfig',
					success(res) {
						let update_info = res.data.data
						
						checkUpdate(update_info, type).then(res => {
							if (res.msg) {
								plus.nativeUI.toast(res.msg);
							}
						}); ///检查更新  
						//checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
						//跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
					}
				})
			},
			getUserInfo(){
				let that = this
				if(that.userInfo == null){
			 		uni.getStorage({
						key: 'user_token',
						success: function (res) {
							console.log(res)
							that.user_token = res.data
							that.checkUser()
						},
						fail: function(res){
							uni.showToast({
								title:'请先登录',
								icon:'none',
								success() {
									uni.redirectTo({
										url:'/pages/login/login',
									})
								}
							})
							
						}
					});
				}
			},
			checkUser(){
				let that = this
				uni.request({
					url:getApp().globalData.baseUrl + '/api/user/getUserInfo',
					method:'POST',
					header: {token:that.user_token},
					success(res) {
						if(res.data.code == 401){
							uni.removeStorageSync({
								key:'user_token',
								success() {
									uni.showToast({
										icon:'none',
										title:'登录已失效,请重新登录',
										success() {
											setTimeout(function(){
												uni.redirectTo({
													url:'/pages/login/login'
												})
											})
										}
									})
								}
							})
						}
						that.userInfo = res.data.data
					},
					fail() {
						uni.showToast({
							title:'网络错误',
							icon:'none',
						})
					}
				})
			},
			jumpUrl(data){
				if(data.type == 1){
					uni.navigateTo({
						url:data.navUrl
					})
				}else{
					window.location.href = data.navUrl
				}
			},
			getGulist(){
				let that = this
				uni.request({
					url:getApp().globalData.baseUrl + "/api/index/getGulist",
					header:{token:that.user_token},
					method:'POST',
					success(res) {
						that.guList = res.data.data.GuList
						that.bk1 = res.data.data.banku.bk1
						that.bk2 = res.data.data.banku.bk2
						that.bk3 = res.data.data.banku.bk3
					}
				})
			}
		}
	}
</script>

<style>
	.uni-navbar__header-container{
		justify-content: center;
	}
	.green{
		color: #44c978 !important;
	}
	.red{
		color: #fe0000 !important;
	}
	.gulist-item-body{
		width: 70%;
		display: flex;
		justify-content: space-between;
		text-align: center;
		
	}
	.gulist-title{
		width: 100%;
		display: flex;
		justify-content: center;
		border-bottom: 1px solid #f5f7fa;
		padding: .6rem;
	}
	.gulist-title>text{
		text-align: center;
	}
	.gulist-item{
		width: 100%;
		padding: .6rem;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #f5f7fa;
	}
	.gulist-item-body > text{
		width: 23%;
		text-align: center;
	}
	.gulist-item-title{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 30%;
		text-align: center;
	}
	
	page{
		background: #f4f4f4;
	}
	.content {
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		background: white;
		border-radius: 15px;
		padding: 1rem;
		margin-bottom: .7rem;
	}
	
	.navBar{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: .5rem;
		background: white;
		text-align: center;
	}
	
	.logop{
		width: 2.5rem;
	}
	
	.swiper{
		margin: 1rem;
	}
	.swiper-item>img{
		width: 100%;
	}
	.content-item{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 26%;
		height: 5rem;
		border-radius: 6px;
		padding: .5rem;
		box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
	}
	.one{
		background: linear-gradient(to bottom, #ffebec, #FFFFFF);
	}
	.two{
		background: linear-gradient(to bottom, #e0fff0, #FFFFFF);
	}
	.three{
		background: linear-gradient(to bottom, #e0fff0, #FFFFFF);
	}
	
	.content-item-one-zhi{
		font-size: 0.7rem;
		color: #fe0000;
	}
	.content-item-two-zhi{
		font-size: 0.7rem;
		color: #28c164;
	}
	.content-item-three-zhi{
		font-size: 0.7rem;
		color: #28c164;
	}
	.content-item-one-num{
		color: #fe0000;
	}
	.content-item-two-num{
		color: #28c164;
	}
	.content-item-three-num{
		color: #28c164;
	}
	.content-item-one-title{
		font-size: 0.7rem;
	}
	.content-item-two-title{
		font-size: 0.7rem;
	}
	.content-item-three-title{
		font-size: 0.7rem;
	}
	.nav-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		    height: 4rem;
	}
	.nav-item>image{
		width: 1.5rem;
		height: 1.5rem;
	}
	
	.navContent{
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		background: white;
		border-radius: 15px;
		/* padding: 1rem; */
		margin-bottom: .7rem;
		flex-wrap: wrap;
	}
	.guContent{
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: space-between;
		/* text-align: center; */
		background: white;
		border-radius: 15px;
		/* padding: 1rem; */
		margin-bottom: .7rem;
		flex-wrap: wrap;
	}
	
	.navContent>view{
		width: 25%;
		margin: .5rem 0;
	}
</style>
